<template>
  <div class="data-table">
    <el-table
      :data="tableData"
      @select="selectChange"
      @select-all="selectAll"
      style="width: 100%"
      @row-click="tableFun.rowClick"
      v-loading="loading">
      <el-table-column
        type="selection"
        align="center"
        width="55">
      </el-table-column>
<!--      <el-table-column-->
<!--        label="序号"-->
<!--        type="index"-->
<!--        width="50"-->
<!--        align="center">-->
<!--        <template slot-scope="scope">-->
<!--          &lt;!&ndash; 有分页时，序号显示 &ndash;&gt;-->
<!--          <span v-if="pageObj">{{(pageObj.currentPage - 1)*pageObj.size + scope.$index + 1}}</span>-->
<!--          &lt;!&ndash; 无分页时，序号显示 &ndash;&gt;-->
<!--          <span v-else>{{scope.$index + 1}}</span>-->
<!--        </template>-->
<!--      </el-table-column>-->
      <template v-for="(col, index) in columns">
        <!-- 操作列/自定义列 -->
        <slot v-if="col.slot" :name="col.slot"></slot>

        <el-table-column v-else-if="col.html"
                         :key="index"
                         :label="col.label"
                         :width="col.width"
                         lign="right"
                         :align="col.align">
          <template slot-scope="scope">
            <div>{{col.html}}</div>
          </template>
        </el-table-column>

        <!-- 普通列 -->
        <el-table-column v-else
                         :key="index"
                         :prop="col.prop"
                         :label="col.label"
                         :width="col.width"
                         :formatter="col.formatter"
                         :align="col.align">
        </el-table-column>
      </template>
    </el-table>
    <!-- 是否调用分页 -->
<!--    <div class="pagination">-->
<!--      <el-pagination v-if="pageObj" background-->
<!--                     layout="total, sizes, prev, pager, next, jumper"-->
<!--                     :page-size="pageObj.size"-->
<!--                     :total="pageObj.total"-->
<!--                     :page-sizes="pageObj.sizes"-->
<!--                     :current-page="pageObj.currentPage"-->
<!--                     @current-change="pageObj.pageFunc"-->
<!--                     @size-change="pageObj.pageSizeFunc">-->
<!--      </el-pagination>-->
<!--    </div>-->
    <div class="paginations" v-if="pageObj" >
      <div class="page-size">
        <span>每页</span>
        <el-select v-model="pageSize"  @change="pageSizeChange">
          <el-option
            v-for="item in pageObj.sizes"
            :key="item"
            :label="item"
            :value="item">
          </el-option>
        </el-select>
        <span>条</span>
      </div>
      <div class="page-num">
        <el-select v-model="currentPage" @change="pageNumChange" placeholder="">
          <el-option
            v-for="item in pageNum"
            :key="item"
            :label="item +'/'+ pageNum"
            :value="item">
          </el-option>
        </el-select>
        <div class="turn-page">
          <i class="el-icon-my-page-lower" @click="pageReduce"></i>
          <i class="el-icon-my-page-upper" @click="pageAdd"></i>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: "iTable",
    props: ['tableData', 'columns', 'loading', 'pageObj', 'tableFun'],
    created () {},
    watch: {
      tableData(val, newval) {
        this.selectDataArrL = []
        let n = Math.ceil(this.pageObj.total / this.pageSize)
        if (n == 0){
          n = 1
        }
        this.pageNum = n
        this.currentPage = this.pageObj.currentPage
      }
    },
    mounted () {
      this.id = this.pageObj.id
      this.pageSize = this.pageObj.sizes[0]
      setTimeout(()=>{
        let n = Math.ceil(this.pageObj.total / this.pageSize)
        if (n == 0){
          n = 1
        }
        this.pageNum = n
        this.currentPage = 1
      }, 500)

    },
    data () {
      return {
        id: '',
        pageSize: '', //每页的分页数
        currentPage: '',//当前页面
        pageNum: '',//总共分页数
        selectDataArrL: [], //勾选值
      }
    },
    methods: {
      selectChange(arr,row) { // 单独选择
        let ids = row[this.id]
        // 判断选中数据中是否包含当前的row
        let isHaveItem = this.selectDataArrL.find(item => item == ids)
        console.log("isHaveItem:" + isHaveItem)
        if (isHaveItem) {
          this.selectDataArrL = this.selectDataArrL.filter(item => item != isHaveItem)
        } else {
          this.selectDataArrL.push(ids)
        }
      },
      selectAll(arr) { // 全选
        // 判断全选选中数据是否为空
        this.selectDataArrL = new Array()
        if (arr.length > 0) {
          arr.forEach(ms => {
            this.selectDataArrL = this.selectDataArrL.concat(ms[this.id])
          })
        }
        // else {
        //   arr.forEach(ms => {
        //     this.selectDataArrL = this.selectDataArrL.filter(item => item != ms[this.id])
        //   })
        // }
      },
      // 多行选中
      handleSelectionChange (val) {
        this.$emit('handleSelectionChange', val)
      },
      pageSizeChange(){ //改变分页尺寸
        let size = this.pageSize
        this.selectDataArrL = []
        //改变页码
        let n = Math.ceil(this.pageObj.total / size)
        this.pageNum = n
        this.currentPage = 1
        //改变每页size
        this.pageObj.pageSizeFunc(size)
      },
      pageNumChange(){ //改变页码
        let ps = this.currentPage
        this.selectDataArrL = []
        this.pageObj.pageFunc(ps)
      },
      pageAdd(){ //页码加1
        let ps = this.currentPage
        if (ps < this.pageNum){
          this.selectDataArrL = []
          ps+=1
          this.currentPage = ps
          this.pageObj.pageFunc(ps)
        }
      },
      pageReduce(){//页码减1
        let ps = this.currentPage
        if (ps > 1){
          this.selectDataArrL = []
          ps-=1
          this.currentPage = ps
          this.pageObj.pageFunc(ps)
        }
      },
    }
  }
</script>
<style scoped lang="scss">
  @media screen and (max-width: 1600px){
    .data-table{
      // list table 勾选框颜色
      /deep/ .el-checkbox__inner{
        border: 1px solid #3B83FC;
        width: 14px;
        height: 14px;
      }
      .paginations{
        position: absolute;
        bottom: 15px;
        left: 150px;
        width: calc(100% - 175px);
        min-width: 750px;
        .page-size{
          display: inline-block;
          /deep/ .el-select{
            padding: 0 10px;
            .el-input{
              width: 80px;
              .el-input__inner{
                height: 32px;
                line-height: 32px;
                border: 0;
              }
            }
            .el-input__suffix{
              .el-input__suffix-inner{
                .el-input__icon{
                  line-height: 32px;
                }
              }
            }
          }

        }
        .page-num{
          display: inline-block;
          float: right;
          /deep/ .el-select{
            .el-input{
              width: 80px;
              .el-input__inner{
                height: 32px;
                line-height: 32px;
                border:1px solid rgba(204,204,204,1);
                border-radius:16px;
              }
            }
            .el-input__suffix{
              .el-input__suffix-inner{
                .el-input__icon{
                  line-height: 32px;
                }
              }
            }
          }
        }
        .turn-page{
          display: inline-block;
          padding-left: 36px;
          .el-icon-my-page-upper{
            cursor: pointer;
            background: url("../../assets/img/page-lower.png") center no-repeat;
            background-size: 18px;
            width: 18px;
            line-height: 2;
            padding-left: 20px;

          }
          .el-icon-my-page-lower{
            cursor: pointer;
            background: url("../../assets/img/page-upper.png") center no-repeat;
            background-size: 18px;
            width: 18px;
            line-height: 2;
          }
          .el-icon-my-page-lower:before {
            content: "替";
            visibility: hidden;
          }
          .el-icon-my-page-upper:before {
            content: "替";
            visibility: hidden;
          }

        }
      }
    }

  }
  @media screen and (min-width: 1600px){
    .data-table{
      // list table 勾选框颜色
      /deep/ .el-checkbox__inner{
        border: 1px solid #3B83FC;
        width: 14px;
        height: 14px;
      }
      .paginations{
        position: absolute;
        bottom: 23px;
        left: 210px;
        width: calc(100% - 250px);
        .page-size{
          display: inline-block;
          /deep/ .el-select{
            padding: 0 10px;
            .el-input{
              width: 80px;
              .el-input__inner{
                height: 32px;
                line-height: 32px;
                border: 0;
              }
            }
            .el-input__suffix{
              .el-input__suffix-inner{
                .el-input__icon{
                  line-height: 32px;
                }
              }
            }
          }

        }
        .page-num{
          display: inline-block;
          float: right;
          /deep/ .el-select{
            .el-input{
              width: 80px;
              .el-input__inner{
                height: 32px;
                line-height: 32px;
                border:1px solid rgba(204,204,204,1);
                border-radius:16px;
              }
            }
            .el-input__suffix{
              .el-input__suffix-inner{
                .el-input__icon{
                  line-height: 32px;
                }
              }
            }
          }
        }
        .turn-page{
          display: inline-block;
          padding-left: 36px;
          .el-icon-my-page-upper{
            cursor: pointer;
            background: url("../../assets/img/page-lower.png") center no-repeat;
            background-size: 18px;
            width: 18px;
            line-height: 2;
            padding-left: 20px;

          }
          .el-icon-my-page-lower{
            cursor: pointer;
            background: url("../../assets/img/page-upper.png") center no-repeat;
            background-size: 18px;
            width: 18px;
            line-height: 2;
          }
          .el-icon-my-page-lower:before {
            content: "替";
            visibility: hidden;
          }
          .el-icon-my-page-upper:before {
            content: "替";
            visibility: hidden;
          }

        }
      }
    }

  }

</style>
